<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 通话录音 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="audioplaycos">
        <play-cos ref="audioplay"></play-cos>
        <p>{{playname}}</p>
      </div>
      <div class="handle-box">
        <el-date-picker class="mr10" v-model="query.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                        range-separator="-">
        </el-date-picker>
        <el-input class="mr10" v-model="query.kw" placeholder="请输入客户姓名/手机号/业务经理" style="width:300px"></el-input>
        <el-button type="primary" size="small" @click="souClick">搜索</el-button>
      </div>
      <el-table :data="visitList" border class="table" style="width: 100%" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column property="name" label="客户姓名">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="drawerStateClick(scope.row.cusId)">
              {{scope.row.cusName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column property="cusPhone" label="客户手机号"></el-table-column>
        <el-table-column property="userName" label="业务经理"></el-table-column>
        <el-table-column property="createTime" label="创建时间"></el-table-column>
        <el-table-column property="recordUrl" label="通话录音">
          <template slot-scope="scope">
            <el-link icon="el-icon-video-play" type="primary" :underline="false" @click="audioplay(scope.row)">点击播放</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, sizes,prev, pager, next" :current-page="query.page" :page-size="query.limit"
                       :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]" :total="query.totalCount" @current-change="handlePageChange"
                       @prev-click="handlePageChange" @next-click="handlePageChange" @size-change="handleSizeChange"></el-pagination>
      </div>
    </div>
    <!-- 查看客户信息窗口 -->
    <customer-model ref="drawerState" @fathergetData="getData"></customer-model>
  </div>
</template>

<script>
import { getSoundRecordingList } from '../../../api/index';
import customermodel from '../../common/customermodel';
import playCOSWAVFile from '../../common/playCOSWAVFile.vue';
export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        time: '',
        kw: '',
        totalCount: 0,
      },
      visitList: [{}],
      playname: '',
    };
  },
  components: {
    "customer-model": customermodel,
    "play-cos": playCOSWAVFile
  },
  created() {
    // this.getData();
  },
  methods: {
    //获取今日到访列表
    getData() {
      getSoundRecordingList({
        page: this.query.page,
        limit: this.query.limit,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        kw: this.query.kw
      }).then(res => {
        if (res.code == 0) {
          this.visitList = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //今日到访翻页
    handlePageChange(page) {
      this.query.page = page;
      this.getData();
    },
    //选择每页展示数量
    handleSizeChange(val) {
      this.query.page = 1;
      this.query.limit = val;
      this.getData();
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getData();
    },
    //点击查看客户信息
    drawerStateClick(id, flag) {
      this.$refs.drawerState.drawerStateClick(id, flag);
    },
    //点击播放
    audioplay(item) {
      // this.$message('调试中，稍后再试');
      this.playname = `(${item.cusName}${item.cusPhone} - ${item.userName}) ${item.createTime}`;
      this.$refs.audioplay.playCOSWAVFile(item.recordUrl);
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
.audioplaycos {
    position: absolute;
    right: 30px;
    top: 50px;
}
.audioplaycos p {
    font-size: 12px;
    margin-top: -5px;
    text-align: center;
}
</style>
